<template> 
	<view class="page">
		<!-- 基地名称 ——start -->
		<view class="head">
			<view class="title">
				<u-icon name="map-fill" color='#EE0000'></u-icon>
				<picker class="itemPicker" @change="baseChange" :value="baseIndex" :range="baseArray">
					<view class="uni-input">{{baseName}}</view>
				</picker>
			</view>
			<button :hairline="true" size="mini" class="button" @click="toDevomber">
				<text style="color: #FFFFFF;"> 查看鸽棚</text>
				<u-icon name="arrow-right" color="#D1D1D1"></u-icon>
			</button>
		</view>
		<!-- 基地名称 ——end -->
		<!-- 基地信息 ——start -->
		<view class="base_info">
			<view class="base_info_head">基地信息</view>
			<view class="common ">
				<u-icon name="account" color="#218868"></u-icon>
				<text> 负责人：{{baseData.principalName}}</text>
			</view>
			<view class="common ">
				<u-icon name="account-fill" color="#218868"></u-icon>
				<text> 饲养员：{{baseData.numberOfBreeder}} 位</text>
			</view>
			<view class="common ">
				<u-icon name="star-fill" color="#ffeb3b"></u-icon>
				<text> 绩效冠军：{{baseData.theBestDovecote}}</text>
			</view>
			<view class="common ">
				<u-icon name="home" color="#3f51b5"></u-icon>
				<text> 鸽棚数量：{{baseData.numberOfDovecote}}座</text>
			</view>
			<view class="common ">
				<u-icon name="map" color="#EE0000;"></u-icon>
				<text>地址：{{baseData.address}}</text>
			</view>
			<view class="map_container" >
				<map style="width: 100%; height: 300px;" id="map" :longitude="longitude" :latitude="latitude" scale="14" :show-location="true"
					:markers="markers" bindmarkertap="makertap"></map>
			</view>
<!-- 			<view class="rgc_info">
				<text>经度：{{longitude}}</text>
				<text>纬度：{{latitude}}</text>
			</view> -->
		</view>
	</view>
</template>
<script>
	var baseListRes = []
	import {
		myRequest
	} from "../../../util/api.js"
	var bmap = require('../../../static/js/bmap-wx.js');
	export default {
		name: 'baseInfo',
		created() {
			this.id = uni.getStorageSync('id');
			this.baseName = uni.getStorageSync('baseName')
			console.log(this.id);
			console.log(this.baseName);
			this.getBaseList();
			// this.getBaseData()
		},
		data() {
			return {
				id: '',
				baseName: '',
				baseArray: [],
				baseIndex: 0,
				baseData: {
					principalName: '',
					numberOfBreeder: '',
					theBestDovecote: '',
					numberOfDovecote: '',
					address: ''
				},
				markers: [],
				latitude: '',
				longitude: ''
			}
		},
		methods: {
			getMap() {
				var that = this;
				// 新建百度地图对象 
				var BMap = new bmap.BMapWX({
					ak: 'm1t2T8fyAIYpVMrjfPOP6CVOKAazdHBl'
				});
				var fail = function(data) {
					console.log(data)
				};
				var success = function(data) {
					let wxMarkerData = data.wxMarkerData;
					that.markers = wxMarkerData
					that.latitude = wxMarkerData[0].latitude
					that.longitude = wxMarkerData[0].longitude
					that.markers[0].height = 500
					that.markers[0].width = 500;
					that.haveDate = true
					console.log('成功', that.markers)
				}
				// 发起geocoding检索请求 
				BMap.geocoding({
					address: that.baseName,
					fail: fail,
					success: success,
					iconPath: '../../img/adress.png',
					iconTapPath: '../../img/adress.png'
				});
			},
			toDevomber() {
				uni.navigateTo({
					url: '../../page_devomber/devomber/devomber'
				});
			},
			baseChange(e) {
				// console.log('改变', e.detail.value);
				this.baseName = this.baseArray[e.detail.value];
				baseListRes.forEach((item, index) => {
					// console.log(this.baseName,'数据')
					if (item.name == this.baseName) {
						// console.log(item.name)
						this.id = item.id;
						this.baseData.principalName = item.principalName;
						this.baseData.numberOfBreeder = item.numberOfBreeder;
						this.baseData.theBestDovecote = item.theBestDovecote;
						this.baseData.numberOfDovecote = item.numberOfDovecote;
						this.baseData.address = item.province +
							item.city +
							item.detailedAddress
					}
				})
				this.getMap()
				uni.setStorageSync('id', this.id);
				uni.setStorageSync('baseName', this.baseName);
				// console.log('当前id',this.id)
			},
			async getBaseList() {
				let option = {
					url: `http://39.99.247.58:9802/breed/Base/list/1/100`,
					header: {
						token: ''
					}
				}
				option.header.token = uni.getStorageSync('token')
				let res = await myRequest(option);
				console.log('基地列表', res)
				if (res.data.statusCode === 20000) {
					console.log('获取数据成功');
					baseListRes = res.data.data.records;
					// this.baseArray = ;
					res.data.data.records.forEach((item, index) => {
						this.baseArray.push(item.name);

						if (item.id == this.id) {
							this.baseData.principalName = item.principalName;
							this.baseData.numberOfBreeder = item.numberOfBreeder;
							this.baseData.theBestDovecote = item.theBestDovecote;
							this.baseData.numberOfDovecote = item.numberOfDovecote;
							this.baseData.address = item.province +
								item.city +
								item.detailedAddress;

							this.getMap()
						}
					})
				}
			},

			//获取基地信息
			async getBaseData() {
				let option = {
					url: `http://39.99.247.58:9802/breed/Base/get/${this.id}`,
					header: {
						token: ''
					}
				}
				option.header.token = uni.getStorageSync('token')
				let res = await myRequest(option);
				console.log('基地信息', res)
				if (res.data.statusCode === 20000) {
					console.log('获取数据成功');
					let baseInfo = res.data.data;
					console.log(baseInfo)
					this.baseData.principalName = baseInfo.principalName;
					this.baseData.numberOfBreeder = baseInfo.numberOfBreeder;
					this.baseData.theBestDovecote = baseInfo.theBestDovecote;
					this.baseData.numberOfDovecote = baseInfo.numberOfDovecote;
					this.baseData.address = baseInfo.province +
						baseInfo.city +
						baseInfo.detailedAddress
				}
			}

		}
	}
</script>
<style lang="scss" scoped>
	.page {
		background-color: #F0F0F0;
		height: 100%;
		width: 100%;

		.head {
			display: flex;
			background-color: #FFFFFF;
			height: 100rpx;
			padding-left: 20rpx;
			align-items: center;
			justify-content: space-around;
			font-size: 36rpx;

			line-height: 80rpx;

			.button {
				// width: 30%;
				display: flex;
				justify-content: center;
				align-items: center;
				// position: absolute;
				// right: 20rpx;
				padding: 0 0 0 5rpx !important;
				width: 180rpx;
				font-size: 28rpx;
				letter-spacing: 3rpx;
				background-color: #23b8ff;
			}

			.title {
				width: 65%;
				display: flex;
				font-weight: 700;

				.itemPicker {
					width: 100%;

					.uni-input {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

				}
			}

		}

		//基地信息展示
		.base_info {
			margin-top: 50rpx;
			// height: 500rpx;
			padding-bottom: 40rpx;
			position: relative;
			background-color: #FFFFFF;

			.base_info_head {
				width: 100%;
				padding: 10rpx 0rpx 20rpx 30rpx;
				margin-bottom: 20rpx;
				font-size: 36rpx;
				font-weight: 700;
				letter-spacing: 2rpx;
				border-bottom: 2rpx solid #D9D9D9;
			}

			.common {
				display: flex;
				height: 75rpx;
				padding-left: 30rpx;
				line-height: 75rpx;
				font-size: 32rpx;
				letter-spacing: 2rpx;

			}

			.map {
				width: 80%;
				height: 500rpx;
				margin: 0 auto;
				border: 2rpx solid #000000;
			}

			.map_container {
				height: 420px;
				width: 95%;
				margin: 0 auto;
				margin-top: 20rpx;
				.map {
					height: 100%;
					width: 100%;
				}
			}



			.rgc_info {
				padding: 5px;
			}

			.rgc_info {
				display: block;
			}



		}
	}
</style>
